<script type="text/x-template" id="simple-table">
    <div>
        <transition name="fade">
            <div v-if="searchs.length > 0" v-show="showSearch" style="margin-bottom: 10px; background-color: #f8f8f8; padding: 10px 0 6px 0; border-radius: 2px; border: 1px solid #ccc;">
                <Row :gutter="16">
                    <i-col v-for="search in searchs" :key="search.key" :xs="12" :sm="8" :md="6" :lg="6" style="margin-bottom: 4px; display: flex; align-items: center;">
                        <div style="font-weight: bold; font-size: 12px; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center;">{{search.label}}</div>
                        <div style="flex: 2;">
                            <i-input v-if="search.type=='INPUT'" type="text" v-model="query[search.key]" :placeholder="search.placeholder" clearable />
                            <i-select v-if="search.type=='SELECT'" v-model="query[search.key]" clearable :placeholder="search.placeholder">
                                <i-option v-for="item in search.options" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                            </i-select>
                        </div>
                    </i-col>
                    <i-col :xs="12" :sm="8" :md="6" :lg="6" style="display: flex; align-items: flex-end;">
                        <i-button type="primary" @click="onClickSearch">搜索</i-button>
                        <i-button style="margin-left: 6px;" @click="onClickSearchReset">重置</i-button>
                    </i-col>
                </Row>
            </div>
        </transition>
        <div style="display: flex; justify-content: space-between;">
            <div>
                <template v-for="btn in buttons">
                    <i-button :type="btn.type" :icon="btn.icon" @click="onClickButton(btn, selection)">{{ btn.label }}</i-button>
                </template>
            </div>
            <div>
                <ButtonGroup>
                    <Tooltip content="刷新" placement="left">
                        <i-button icon="md-refresh" type="primary" @click="refresh()" />
                    </Tooltip>
                    <Tooltip v-if="exports.length > 0" content="导出excel" placement="left">
                        <i-button :loading="exportLoading" icon="md-grid" type="success" @click="exportExcel()" />
                    </Tooltip>
                    <Tooltip content="显示/隐藏搜索" placement="left">
                        <i-button :icon="showSearch ? 'ios-funnel' : 'ios-funnel-outline'" @click="toggleSearch()" />
                    </Tooltip>
                </ButtonGroup>
            </div>
        </div>
        <div style="margin-top: 10px;">
            <Table ref="Table" :loading="loading" :columns="columns" :data="data" @on-sort-change="changeSort" @on-selection-change="onSelectionChange">
                <template v-for="col in columns" slot-scope="{ row, index }" :slot="col.key">
                    <template v-if="col.type == 'TEXT'">
                        <span>{{ row[col.text_key || col.key] }}</span>
                    </template>
                    <template v-else-if="col.type == 'TEXT_POPTIP'" >
                        <poptip word-wrap :transfer="true" trigger="hover" :width="col.poptip_width || 400" :content="row[col.text_key || col.key]">
                            <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ row[col.text_key || col.key] }}</span>
                        </poptip>
                    </template>
                    <template v-else-if="col.type == 'IMAGE'" >
                        <Avatar shape="square" icon="ios-person" :src="row[col.key]" />
                    </template>
                    <template v-else-if="col.type == 'DOT'">
                        <div v-for="dot in col.dots" :key="dot.key" v-if="dot.key == row[col.key]">
                            <div :style="{color: (col.color ? col.color : 'balck') }">
                                <div class="dot" :style="{background: dot.color}"></div>
                                <span v-if="dot.text">{{ dot.text }}</span>
                                <span v-else>{{ row[col.text_key || col.key] }}</span>
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <div style="margin: 0 2px; display: inline-block;" v-for="btn in col.buttons" v-if="row['actions'] && row['actions'][btn.action]">
                            <i-button :loading="loading" :type="btn.type" :icon="btn.icon" size="small" @click="onClickButton(btn, row)">{{ btn.label }}</i-button>
                        </div>
                    </template>
                </template>
            </Table>
        </div>
        <div id="page" style="margin-right: 4px; display: flex; justify-content: flex-end; margin-top: 12px;">
            <Page :total="total" :current="query.page" :page-size="query.page_size" show-total show-elevator show-sizer @on-change="onChangePage" @on-page-size-change="onChangepageSize" />
        </div>
    </div>
</script>
<style>
    .search-enter, .search-leave-to {
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }
    .search-leave, .search-enter-to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    .search-enter-active, .search-leave-active {
        transition: all .2s;
    }
    .dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 100%;
    }
</style>
<script>
    Vue.component('SimpleTable', {
        template: '#simple-table',
        props: {
            source: String,
        },
        mounted() {
            const $source = JSON.parse(this.source)
            debug('SimpleTable', 'source', $source)
            this.buttons = $source.buttons
            this.columns = $source.columns
            this.searchs = $source.searchs
            this.exports = $source.exports
            this.url = $source.url
            this.columns.forEach(col => {
                if(col.order) {
                    this.query['sort'] = col.key
                    this.query['order'] = col.order
                }
            });
            this.defaultQuery = {...this.query}
            this.fetchList()
            bindButtonHandler(this)
        },
        data () {
            return {
                loading: false,
                exportLoading: false,
                showSearch: true,
                searchs: [],
                buttons: [],
                columns: [],
                exports: [],
                url: '',
                data: [],
                total: 0,
                query: {
                    page: 1,
                    page_size: 10,
                },
                defaultQuery: {},
                selection: []
            }
        },
        methods: {
            fetchList(refresh = false) {
                if(!this.url) return
                if(refresh) {
                    this.query.page = 1
                }
                this.loading = true
                fetch(this.url, this.query, (success, result) => {
                    this.loading = false
                    if(!success) return
                    this.data = result.data
                    this.last_page = result.last_page
                    this.total = result.total
                })
            },
            refresh() {
                this.fetchList(true)
            },
            changeSort(e) {
                this.query['sort'] = e.key
                this.query['order'] = e.order
                this.fetchList(true)
            },
            onClickSearch() {
                this.fetchList(true)
            },
            onClickSearchReset() {
                this.query = {...this.defaultQuery}
                this.refresh()
            },
            onSelectionChange(selection) {
                this.selection = selection
            },
            toggleSearch() {
                this.showSearch = !this.showSearch
            },
            onChangePage(page) {
                this.query.page = page
                this.fetchList()
            },
            onChangepageSize(size) {
                this.query.page_size = size
                this.query.page = 1
                this.fetchList()
            },
            async exportExcel() {
                try {
                    this.exportLoading = true
                    await exportTabelExcel(this.columns, this.selection, {})
                    this.exportLoading = false
                } catch (error) {
                    this.exportLoading = false
                    console.error(error)
                }
            },
            postBefore() {
                this.loading = true
            },
            postAfter(success) {
                this.loading = false
                if(!success) return
                this.fetchList()
            },
            formConfirm() {
                this.fetchList()
            }
        }
    })
</script>
